<template>
	<view class="Lu-course-box">
		<view class="Lu-course-header">
			<view class="Lu-course-back" @click="navback()">
				<text class="iconfont icon-fanhui"></text>
			</view>
			<view class="Lu-course-proimg">
				<image class="Lu-course-img" :src="apiUrl + courseinfor.course_pic" mode="aspectFill"></image>
			</view>
			<view class="Lu-course-title">
				<view class="Lu-course-name">{{courseinfor.course_name}}</view>
				<view class="Lu-course-introduce" v-html='courseinfor.course_class_details'></view>
				<view class="Lu-course-adress clearfix">
					<text>￥</text>{{courseinfor.course_platform_price}}
				</view>
			</view>
		</view>
		<view class="Lu-course-body">
			<view class="Lu-course-bodytit">
				商品信息
			</view>
			<view class="Lu-course-Course">
				<view class="Lu-course-tr clearfix Lu-borderbottom">
					<view class="Lu-course-tdtitle">商品名称</view>
					<view class="Lu-course-tdcontent">{{courseinfor.course_name}}</view>
				</view>
				<view class="Lu-course-tr clearfix Lu-borderbottom">
					<view class="Lu-course-tdtitle">商品节数</view>
					<view class="Lu-course-tdcontent">共{{courseinfor.course_num}}节</view>
				</view>
				<view class="Lu-course-tr clearfix Lu-borderbottom">
					<view class="Lu-course-tdtitle">时长</view>
					<view class="Lu-course-tdcontent">{{courseinfor.duration}}分钟</view>
				</view>
				<!-- <view class="Lu-course-tr clearfix">
					<view class="Lu-course-tdtitle">上课时间</view>
					<view class="Lu-course-tdcontent">{{courseinfor.class_time}}</view>
				</view> -->
			</view>
		</view>
		<view class="Lu-course-footer clearfix">
			<view class="Lu-course-zhuye fl" @click="navback()">
				<view class="iconfont icon-zhuye Lu-course-icon"></view>
				<view class="Lu-course-biao">商家</view>
			</view>
			<view class="Lu-course-phone fl" @click="gophone(courseinfor.phone)">
				<view class="iconfont icon-shangjiaphone Lu-course-icon"></view>
				<view class="Lu-course-biao">电话</view>
			</view>
			<view class="Lu-course-buy fr" @click="buykecheng()">
				立即付款
			</view>
		</view>
		 <denglu v-on:user="userinfos" v-if="hidden[0]"></denglu>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import md5 from 'js-md5';
	import denglu from "@/wxcomponents/ah-denglu/denglu.vue"
	export default{
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		components: {denglu},
		data(){
			return{
				courseinfor:{},
				course_goods_id:'',
				fkuser:{
					name:'',
					phone:''
				},
				hidden:[false]
			}
		},
		onLoad: function(option) {
			this.course_goods_id= option.id;
			this.wxgetcourseinfor()
		},
		onShow:function(){
			
		},
		
		methods:{
			userinfos:function(data,data2){
				this.fkuser = data
				this.$set(this.hidden,0,data2)
				console.log(this.hidden[0])
			},
			navback(){
				uni.navigateBack({
					delta:1
				})
			},
			wxgetcourseinfor:function(){
				uni.request({
					url:this.apiUrl+ 'api/get_curriculum_info',
					data:{
						course_goods_id:this.course_goods_id
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.courseinfor = res.data.data
					}
				})
			},
			gophone:function(phone){
				uni.makePhoneCall({
				 	
				 	// 手机号
				    phoneNumber: phone, 
				
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
				
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
					
				  });
			},
			buykecheng:function(){
				if(this.hasLogin == true){
					var _this = this
					uni.getStorage({
					    key: 'user',
					    success: function (res) {	
							console.log(_this.openId)
							const shortName = _this.openId.substring(0,_this.userInfo.id%10) + _this.courseinfor.course_platform_price*100;
							console.log(shortName)
							console.log(md5(shortName))
							console.log(_this.course_goods_id)
							uni.request({
								url:_this.apiUrl+ 'api/payment',
								data:{
									money:_this.courseinfor.course_platform_price*100,
									sign:md5(shortName),
									type:1,
									course_goods_id:_this.course_goods_id,
									request_type:1,
									user_name: 1,
									user_phone: 11
								},
								method:'POST',
								header:{
									openid:_this.openId
								},
								success: (res) => {
									console.log(res)
									console.log(res.data.data.prepayid)
									//#ifdef APP-PLUS
									let obj = {
										appid: res.data.data.appid,
										noncestr: res.data.data.noncestr,
										package: 'Sign=WXPay', // 固定值，以微信支付文档为主
										partnerid: '1573493581',
										prepayid: res.data.data.prepayid,
										timestamp: res.data.data.timestamp,
										sign: res.data.data.sign // 根据签名算法生成签名
									}
									console.log(JSON.stringify(obj))
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo:JSON.stringify(obj),
										success: function (res) {
										  uni.showModal({
										   title: '支付成功',
										   content:'支付成功',
										   success: function (res) {
											   if (res.confirm) {
												  
											   } else if (res.cancel) {
												   
											   }
											   }
										   })
										},
										fail: function (err) {
											console.log(err)
											uni.showModal({
												title: '支付失败',
												content:'支付失败',
												success: function (res) {
													if (res.confirm) {
													   
													} else if (res.cancel) {
														
													}
												}
											})
										}
									});
									//#endif
									//#ifdef MP-WEIXIN
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.data.timeStamp,
										nonceStr: res.data.data.nonceStr,
										package: res.data.data.package,
										signType: res.data.data.signType,
										paySign: res.data.data.paySign,
										success: function (res) {
										   uni.showModal({
											   title: '支付成功',
											   success: function (res) {
												   if (res.confirm) {
													  
												   } else if (res.cancel) {
													   
												   }
											   }
										   })
										},
										fail: function (err) {
											uni.showModal({
												title: '支付失败',
												success: function (res) {
													if (res.confirm) {
													   
													} else if (res.cancel) {
														
													}
												}
											})
										}
									});
									//#endif
								}
							})
						},
						fail:function(res){
							 _this.$set( _this.hidden,0,true)
						}
					})
				}else{
					uni.showModal({
					    title: '未登录',
					    content: '请授权登录',
					    success: function (res) {
					        if (res.confirm) {
					           
					        } else if (res.cancel) {
					            
					        }
					    }
					})
				}
					
			}
			
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
	}
	.Lu-course-box{
		.Lu-course-header{
			position: relative;
			.Lu-course-back{
				position: absolute;
				top: 60rpx;
				left: 0;
				z-index: 5;
				margin: 0 30rpx;
				font-size: 30rpx;
				background-color: #999;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				text{
					color: #fff;
				}
			}
			.Lu-course-proimg{
				width: 100%;
				.Lu-course-img{
					width: 100%;
				}
			}
			.Lu-course-title{
				padding: 20rpx 30rpx;
				background-color: #fff;
				.Lu-course-name{
					font-size: 36rpx;
					color: #333333;
				}
				.Lu-course-introduce{
					font-size: 28rpx;
					color: #999999;
					margin: 20rpx 0;
				}
				.Lu-course-adress{
					font-size: 38rpx;
					color: #ff3e3e;
					text{
						font-size: 28rpx !important;
						
					}
				}
			}
		}
		.Lu-course-body{
			margin: 20rpx;
			padding-top: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.Lu-course-bodytit{
				
				background-image: url(~@/static/image/classific/bg22.png);
				background-size: 240rpx 80rpx;
				background-repeat: no-repeat;
				height: 80rpx;
				width: 240rpx;
				line-height: 70rpx;
				text-align: center;
				margin: 0 auto;
				
				font-size: 34rpx;
				color: #fff;
			}
			.Lu-course-Course{
				margin: 20rpx 20rpx 0;
				padding: 20rpx;
				.Lu-borderbottom{
					border-bottom: 2rpx solid #e5e5e5;
				}
				.Lu-course-tr{
					padding: 20rpx 0;
					.Lu-course-tdtitle{
						float: left;
						margin-right: 50rpx;
						font-size: 30rpx;
						font-weight: 600;
					}
					.Lu-course-tdcontent{
						float: right;
						font-size: 30rpx;
						color: #999999;
						margin-left: 50rpx;
					}
				}
			}
		}
		.Lu-course-footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			// line-height: 100rpx;
			background-color: #fff;
			.Lu-course-icon{
				font-size: 48rpx;
				color: #999999;
			}
			.Lu-course-biao{
				font-size: 24rpx;
				color: #999999;
			}
			.Lu-course-zhuye{
				margin-left: 70rpx;
				text-align: center;
				margin-top:8rpx ;
			}
			.Lu-course-phone{
				margin-left: 70rpx;
				text-align: center;
				margin-top:8rpx ;
			}
			.Lu-course-buy{
				background-image: url(~@/static/image/classific/buybg.png);
				background-size: 340rpx 80rpx;
				background-repeat: no-repeat;
				width: 340rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin-top: 10rpx;
				margin-right: 20rpx;
				font-size: 34rpx;
				color: #fff;
			}
		}
	}
		
</style>
